<template>
    <flex height="50px">
      <flex-item>
      <router-link to="/home" tag="div">
        <img src="/static/tabBar/home_on.svg" />
        <p>首页</p>
      </router-link>
      </flex-item>
      <flex-item>
      <router-link to="/cate" tag="div">
        <img src="/static/tabBar/cate_on.svg" />
        <p>分类</p>
      </router-link>
      </flex-item>
      <flex-item>
      <router-link to="/cart" tag="div">
        <img src="/static/tabBar/cart_on.svg" />
        <p>购物车</p>
      </router-link>
      </flex-item>
      <flex-item>
      <router-link to="/user" tag="div">
        <img src="/static/tabBar/user_on.svg" />
        <p>我的</p>
      </router-link>
      </flex-item>
    </flex>
</template>

<script>
    import flex from '@/components/layout/flex';
    import flexItem from '@/components/layout/flexItem';
    export default {
        name: "tabBar",
        data(){
          return {

          }
        },
        components:{
          flex,
          flexItem
        },
        methods:{
            navigate(){
              console.log('navigate');
            }
        }
    }
</script>

<style lang="less" scoped>
  img{
    width: 25px;
  }
  .router-link-active{
    background-color:darkgray;
    height: 100%;
  }
</style>
